import { TIMEOUT } from "dns";
import React from "react"
// 创建类组件
type Istate = {
    name: string;
    age: number
}

class ClassCom extends React.Component<any, Istate>{
    timeout:number;
    state:Istate;
    constructor(props: any) {
        super(props)
        this.state = {
            name: '半甜',
            age: 18
        }
        // 初始化timeout
        this.timeout=0
    }
    componentDidMount(): void {
        // 在react中变更状态，不能用“=”，一定要用setState(),会触发render()的调用
        
        // this.timeout=window.setTimeout(() => {
        //     this.setState({
        //         name:'无糖'
        //     })
        //  }, 2000)

        //  1.************ 不要直接修改state ************
        // this.state.name='无糖'
        // console.log(this.state)
        // this.setState({}); //render()

        // 2.************ 状态的更新可能是异步的 ************
        this.setState({
            name:'可乐加冰'
        })
        // 简单写法
        // setTimeout(()=>{
        //     console.log(this.state.name)
        // })
        // 官方写法
        this.setState((preState,preProps)=>{
            console.log(preState,preProps)
            return{
                name:'123'
            }
        })

        // 3.************ 状态的更新会合并：指在同一个函数中多次调用setState最终会合并成一个调用，来提高性能************
        // vue3 watchEffect
        this.setState({})
        this.setState({})
        this.setState({})
        this.setState({})
        this.setState({})
        this.setState({})
    }
    render(): React.ReactNode {
        console.log('render()执行了')
        // render()是react生命周期中的一个钩子函数，在这里会进行diff算法
        return (
            <fieldset>
                <legend>正确使用组件状态的三件事</legend>
                <h1>组件的state中的name:{this.state.name}</h1>
            </fieldset>
        )
    }
}

export default ClassCom